<template>
  <a-modal
    :title="title"
    :width="1400"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @cancel="handleCancel"
    @ok="handleCancel"
    cancelText="关闭">
    <div>
      <div class="departName">{{departName}}</div>
      <div class="info">
        <div class="infoItem">
          <span class="infoName">部门成员数：</span>
          <span class="infoValue">{{performance.jixiaokaoping}}</span>
        </div>
        <div class="infoItem">
          <span class="infoName">绩效考评人数：</span>
          <span class="infoValue">{{performance.feiguding}}</span>
        </div>
        <div class="infoItem">
          <span class="infoName">固定薪资人数：</span>
          <span class="infoValue">{{performance.guding}}</span>
        </div>
        <div class="infoItem">
          <span class="infoName">动态分配金额(已分配/未分配)：</span>
          <span class="infoValue">{{performance.yifenpeiAmount}}/{{performance.weifenpeiAmount}}</span>
        </div>
        <div class="infoItem">
          <span class="infoName">本月岗位薪资开支：</span>
          <span class="infoValue">{{performance.gangweiAmount}}</span>
        </div>
        <div class="infoItem">
          <span class="infoName">本月部门考评绩效总和：</span>
          <span class="infoValue">{{performance.feigudingAmount}}</span>
        </div>
      </div>
    </div>
    <a-form layout="inline" labelAlign="left">
      <a-row>
        <a-col :span="7">
          <a-form-item
            label="本月部门奖金金额"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol">
            <a-input v-model="record.departAmount"
                     placeholder="请输入本月部门奖金金额"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item
            label="绩效奖金金额"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol">
            <a-input v-model="record.perforAmount"
                     placeholder="请输入绩效奖金金额"></a-input>
          </a-form-item>

        </a-col>
        <a-col :xl="4" :lg="7" :md="6" :sm="6">
            <span style="float: left;overflow: hidden; margin-left:-40px" class="table-page-search-submitButtons">
              <a-button type="primary" @click="handleOk">确定</a-button>
            </span>
        </a-col>
      </a-row>
      <a-row>
        <a-col :span="6">
          <a-form-item
            label="动态可分配金额"
            :label-col="formItemLayout.labelCol"
            :wrapper-col="formItemLayout.wrapperCol">
            <a-input v-model="fenpeiAmount"
                     disabled></a-input>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div>
      <a-table
        ref="table"
        size="middle"
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        class="j-table-force-nowrap">
         <div slot="jiaquan" slot-scope="text, record" style="width: 260px">
           <a-input-group compact>
             <a-select v-model="record.type" style="width: 60px">
               <a-select-option :value="2">加</a-select-option>
               <a-select-option :value="1">减</a-select-option>
             </a-select>
             <a-input type="number" style="width: 30%" v-model="record.valueAmount"></a-input>
             <a-input v-model="record.remark" style="width: 40%" placeholder="备注"></a-input>
           </a-input-group>
       </div>
        <span slot="action" slot-scope="text, record">
          <a @click="handleSave(record)">保存</a>
        </span>
      </a-table>

    </div>
  </a-modal>
</template>

<script>
  import {JeecgListMixin} from '@/mixins/JeecgListMixin'
  import {getAction, httpAction, putAction} from '@/api/manage'

  export default {
    name: "MonthDetailModel",
    mixins: [JeecgListMixin],
    components: {},
    data() {
      return {
        formItemLayout: {
          labelCol: {span: 10},
          wrapperCol: {span: 14},
        },
        record:{},
        confirmLoading: false,
        title: '部门绩效详情',
        visible: false,
        description: '部门绩效详情',
        departName: '',
        peopleCount: '',
        performance: '',
        perforMonthId: '',
        // 表头
        columns: [

          {
            title: '工号',
            align: "center",
            dataIndex: 'workNo'
          },
          {
            title: '姓名',
            align: "center",
            dataIndex: 'realname'
          },
          {
            title: '岗位',
            align: "center",
            dataIndex: 'roleName'
          },
          {
            title: '岗位绩效',
            align: "center",
            width:'200px',
            dataIndex: 'postPreforName'
          },
          // {
          //   title: '岗位绩效分值',
          //   align: "center",
          //   dataIndex: 'postScore'
          // },
          {
            title: '时效绩效',
            align: "center",
            dataIndex: 'timeScore'
          },
          {
            title: '传播绩效',
            align: "center",
            dataIndex: 'spreadScore'
          },
          {
            title: '其他绩效',
            align: "center",
            dataIndex: 'otherScore'
          },
          {
            title: '额定绩效总分',
            align: "center",
            dataIndex: 'baseScore'
          },
          // {
          //   title: '核验绩效总分',
          //   align: "center",
          //   dataIndex: 'performanceScore'
          // },
          {
            title: '岗位薪资',
            align: "center",
            dataIndex: 'postScore'
          },
          {
            title: '绩效奖金',
            align: "center",
            dataIndex: 'scoreAmount'
          },
          {
            title: '本月薪资(元)',
            align: "center",
            dataIndex: 'performanceScore'
          },
          {
            title: '加权绩效项',
            align: "center",
            dataIndex: 'jiaquan',
            scopedSlots: {customRender: 'jiaquan'}
          },
          {
            title: '操作',
            align: "center",
            dataIndex: 'action',
            scopedSlots: {customRender: 'action'},
          },
        ],
        url: {
          list: "/performance/performanceMonthDetail/list",
        },
      }
    },
    computed: {
      importExcelUrl: function () {
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
      fenpeiAmount() {
        const departNum = new Number(this.record.departAmount);
        const performNum = new Number(this.record.perforAmount);
        if (departNum instanceof Number && performNum instanceof Number) {
          return departNum - performNum;
        }
        return '';
      },
    },
    methods: {
      toList(record,perforMonthId, departName) {
        this.visible = true;
        this.record = record;
        this.queryParam.perforMonthId = record.id;
        this.departName = record.departName;
        this.perforMonthId = record.id;
        this.loadData();
        this.getTotalPerfor(record.id);
      },

      close() {
        this.$emit('close')
        this.visible = false
      },
      handleSave(record) {
        httpAction("/performance/performanceMonthDetail/edit", record, "put").then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.getTotalPerfor(this.perforMonthId);
            this.loadData();
          } else {
            this.$message.warning(res.message);
          }
        })
      },
      handleCancel() {
        this.close()
      },
      getTotalPerfor: function (perforMonthId) {
        var url = '/performance/performanceMonthDetail/total?perforMonthId=' + perforMonthId
        getAction(url).then((res) => {
          if (res.success) {
            res.result.weifenpeiAmount = Number(this.record.fenpeiAmount) + Number(res.result.otherAmount);
            this.performance = res.result
          }
        })
      },
      handleOk() {
        const params = {
          perforMonthId: this.perforMonthId,
          departAmount: this.record.departAmount,
          perforAmount: this.record.perforAmount,
          fenpeiAmount: this.fenpeiAmount
        };
        this.loading = true;
        getAction('/performance/performanceMonthDetail/countPerfor', params).then(res => {
          if (res.success) {
            this.loadData();
          } else {
            this.loading = false;
          }
        });
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';

  .departName {
    font-weight: bold;
    font-size: 14px;
    line-height: 35px;
  }
  .info{
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .infoName {
    color: #333333;
  }

  .infoValue {
    color: #999999;

  }
  .infoItem{
    margin-right: 50px;
    margin-top: 10px;
  }
</style>